<template>
    <div id="home">
        <div class="logo">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/h5/1_03.png" alt="" class="bbLogo">
            
        </div>

        <!-- 对联和动图 -->
    <div class="main">
        <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/h5/1_07.png" alt="" class="slide">
        <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/h5/logo.gif" alt="" class="gif">
        <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/h5/1_10.png" alt="" class="slide">
    </div>
    <!-- 对联动图end -->

    <!-- 按钮 -->
    <div class="btn-wrapper">
        <div class="goal-wrapper">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/h5/1_13.png" alt="">
        </div>
        <div class="btn-main">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/h5/btn1.png" alt="" @click="toFlag">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/h5/btn2.png" alt="">
        </div>
    </div>
    <!-- 按钮end -->

    <div class="bottom-fiex-content">
			<div class="fiex-content-left">
				<img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/fiex-icon.png">
			</div>
			<div class="fiex-content-center">
				<p>哔哔机</p>
				<text>一个属于年轻人瞎哔哔的圈子</text>
			</div>
			<div class="fiex-content-right" @click="toHome">
				进圈
			</div>
		</div>
    </div>
</template>
<script>
export default {
    name:'home',
    data(){
        return {}
    },
    methods:{
        toHome(){},
        toFlag(){
            this.$router.push('flag')
        },
    }
}
</script>
<style lang="scss" scoped>
    #home{
        background-image: url('https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/h5/bg1.png');
        background-size: 100% 100%;
        width: 100vw;
        height: 100vh;
        position: relative;
        //头部
        .logo{
            padding-top:40px;
            .bbLogo{
                width: 200px
            }
        }

        //2侧
        .main{
            margin:200px auto 0px;
            width: 100vw;
            padding:0 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            .gif{   
                position: absolute;
                top:10%;
                left:50%;
                transform: translate(-50%,-50%);
                width: 80vw;
            }
            .goal{
                position: absolute;
                bottom:10%;
                left:50%;
                transform: translate(-50%,-50%);
                width: 50vw;
            }
            .slide{
                width: 60px;
            }
        }

        .btn-wrapper{
            position: relative;
            top:-150px;
            
            .goal-wrapper{
                border-bottom:4px solid #f5b5b4;
                width: 50vw;
                margin:0 auto 50px;
            }
            img{
                    width: 50vw;
                }
            .btn-main{
                border:4px solid #f5b5b4;
                display: inline-block;
                width: 50vw;
            }
        }


        .bottom-fiex-content{
		position: fixed;
		width: calc(100vw - 60px);
		bottom: 0;
		left: 0;
		padding: 20px 30px;
		background: rgba(0,0,0,0.5);
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.fiex-content-left{
			img{
                width: 94px;
			height: 94px;
            }
		}
		.fiex-content-center{
			color: #FFFFFF;
			padding: 0 20px;
			max-width: calc(100% - 218px);
			p{
				font-size: 32px;
				font-weight: bold;
				line-height: 44px;
				margin-bottom: 10px;
			}
			text{
				font-size: 24px;
			}
		}
		.fiex-content-right{
			margin-left: auto;
			width: 124px;
			height: 72px;
			line-height: 72px;
			text-align: center;
			background: #FFE916;
			border: 4px solid #000000;
			font-size: 32px;
			border-radius: 16px;
		}
	}
    }
</style>